<template>
  <div class="detailShopInfo" v-if="Object.keys(shop).length !== 0">
    <div class="shopName">
      <img :src="shop.logo" alt="" />
      <span>{{ shop.name }}</span>
    </div>
    <div class="shopInfo">
      <div>
        <div>
          <p>{{ wholeSell }}</p>
          <p>总销量</p>
        </div>
        <div>
          <p>{{ shop.goodsCount }}</p>
          <p>全部宝贝</p>
        </div>
      </div>
            <div class="shop-middle-item shop-middle-right">
        <table>
          <tr v-for="(item, index) in shop.score" :key="index">
            <td>{{item.name}}</td>
            <td class="score" :class="{'score-better': item.isBetter}">{{item.score}}</td>
            <td class="better" :class="{'better-more': item.isBetter}"><span>{{item.isBetter ? '高':'低'}}</span></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="shopBtn">进店逛逛</div>
  </div>
</template>

<script>
export default {
  props: {
    shop: {},
  },
  data() {
    return {
      score: String,
    };
  },
  computed: {
    wholeSell() {
      return this.shop.sells >= 10000
        ? (this.shop.sells / 10000).toFixed(1) + "万"
        : this.shop.sells;
    },
  },
  methods: {
    serviceScore(i) {
      let scoreColor = null;
      if (this.shop.score[i].isBetter) {
        scoreColor = "red";
      } else {
        scoreColor = "#6aa44a";
      }
      return scoreColor;
    },
  },
};
</script>

<style scoped>
.detailShopInfo {
  border-bottom: solid #f7f5f6 8px;
}
.shopName {
  padding: 10px 0 10px 10px;
}
.shopName img {
  margin-right: 5px;
  width: 35px;
  vertical-align: middle;
}
.shopInfo {
  display: flex;
  padding: 20px 20px 10px;
}
.shopInfo > div {
  flex: 1;
  justify-content: space-around;
  display: flex;
}
.shopInfo > div:first-child {
  flex: 1;
  display: flex;
  align-items: center;
  border-right: solid 1px #a5a9aa;
}
.shopInfo > div:first-child > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shopInfo > div:first-child > div > p:nth-child(2) {
  padding-top: 5px;
  font-size: 14px;
}
/* .shopInfo ul {
  display: flex;
  flex-direction: column;
  height: 100%;
} 
.shopInfo > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shopInfo > div:nth-child(2) > div {
  padding-bottom: 5px;
  list-style: none;
  font-size: 14px;
} */
/* 这里用ul和li使用flex好像有点问题，上面注释的css是把ul去掉，li换成div，加载没有问题 */
.shop-middle-right {
    font-size: 13px;
    color: #333;
  }
  .shop-middle-right table {
    width: 120px;
    margin-left: 30px;
  }
  .shop-middle-right table td {
    padding: 3px 0;
  }
  .shop-middle-right .score {
    color: #5ea732;
  }
  .shop-middle-right .score-better {
    color: #f13e3a;
  }
  .shop-middle-right .better span {
    background-color: #5ea732;
    color: #fff;
    text-align: center;
  }
  .shop-middle-right .better-more span {
    background-color: #f13e3a;
  }
.shopBtn {
  width: 100px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  margin: 5px auto;
  background-color: #f2f3fa;
}
</style>